<template>
    <div>
        <v-card>
        <v-card-title>
            <v-btn color="primary" @click="addUser">添加系统用户</v-btn>
        </v-card-title>
        <v-data-table
                :headers="headers"
                :items="members"
                hide-actions
                class="elevation-1"
        >
            <template v-slot:items="props">
                <td class="text-xs-center">
                    <div class="img">
                        <v-img
                                width="80px"
                                :src="props.item.avator"
                                aspect-ratio="1"
                                class="grey lighten-2"
                        >
                            <template v-slot:placeholder>
                                <v-layout
                                        fill-height
                                        align-center
                                        justify-center
                                        ma-0
                                >
                                    <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
                                </v-layout>
                            </template>
                        </v-img>
                    </div>
                </td>
                <td class="text-xs-center">{{ props.item.id }}</td>
                <td class="text-xs-center">{{ props.item.username }}</td>
                <td class="text-xs-center">{{ props.item.phone }}</td>
                <td class="text-xs-center">
                    <div style="margin-left: 30px"  >
                        <v-switch
                        v-model="props.item.status"
                        label=""
                        color="blue"
                        @change="changeState(props.item)"
                ></v-switch>
                    </div>
                </td>
                <td class="text-xs-center">
                    <v-tooltip left>
                        <v-btn slot="activator" icon @click="editMember(props.item.id)">
                            <i class="el-icon-edit"/>
                        </v-btn>
                        <span> 修改用户</span>
                    </v-tooltip>
                    <v-tooltip left>
                        <v-btn icon slot="activator" @click="deleteMember( props.item.id)">
                            <i class="el-icon-delete"/>
                        </v-btn>
                        <span> 删除用户</span>
                    </v-tooltip>
                </td>
            </template>
        </v-data-table>
        </v-card>
        <!--弹出的对话框-->
        <v-dialog max-width="500" v-model="show" persistent scrollable>
            <v-card>
                <!--对话框的标题-->
                <v-toolbar dense dark color="primary">
                    <v-toolbar-title>{{isEdit ? '修改' : '添加'}}用户</v-toolbar-title>
                    <v-spacer/>
                    <!--关闭窗口的按钮-->
                    <v-btn icon @click="closeWindow">
                        <v-icon>close</v-icon>
                    </v-btn>
                </v-toolbar>
                <!--对话框的内容，表单-->
                <v-card-text class="px-3" style="height: 600px">
                    <member-form :oldMember="oldMember" @close="closeWindow" :is-edit="isEdit" ref="MemberForm"/>
                </v-card-text>

            </v-card>
        </v-dialog>
        <div class="text-xs-center pt-2">
            <v-pagination v-model="pagination.page" :length="pagination.totalPage"></v-pagination>
        </div>
    </div>
</template>

<script>
    import MemberForm from "./MemberForm";

    export default {
        data () {
            return {
                pagination: {
                    rowsPerPage :5,
                    page:1
                },
                headers: [
                    {
                        text: '头像',
                        align: 'center',
                        sortable: false,
                        value: 'avator'
                    },
                    { text: '用户id', value: 'id',align: 'center'},
                    { text: '用户名', value: 'username',align: 'center' },
                    { text: '电话', value: 'phone' ,align: 'center'},
                    { text: '是否禁用', value: 'status',align: 'center' },
                    { text: '操作' ,align: 'center'}
                ],
                members: [],
                isEdit: false,
                show: false,
                loading: true,
                oldMember: {},
                totalMembers: 0,

            }
        },
        methods: {

            addUser() {
                this.isEdit = false
                this.show = true
                this.oldMember = {
                    avator:'http://ly-chen.oss-cn-beijing.aliyuncs.com/image/pnnksbc2wXRwP5iNhPx5.jpg'
                }
            },
            changeState(member) {

                member.status = member.status?'1':"0"
                console.log(member.status)

                this.$http({
                    method: 'put',
                    url: "/member/save",
                    data: this.$qs.stringify(member)
                });

            },
            getDataFromServer() {
                this.$http.get("/member/page", {
                    params: {
                        key: this.search,
                        page: this.pagination.page,
                        rows: this.pagination.rowsPerPage,
                        sortBy: this.pagination.sortBy ? this.pagination.sortBy : "",
                        desc: this.pagination.descending ? this.pagination.descending : "true"
                    }
                }).then(resp => {
                    this.members = resp.data.items;
                    this.pagination.totalItems = resp.data.total;
                    this.pagination.totalPage = resp.data.totalPage;

                    console.log(this.members)
                    this.loading = false;
                }).catch(() => {
                    this.members = [];
                    this.totalMembers = 0;
                    this.loading = false;
                })
            },
            editMember(id) {
                this.$http.get("/member/findById?id="+id).then(resp=>{
                    this.isEdit = true
                    this.show = true
                    this.oldMember = resp.data
                    console.log(this.oldMember)
                })

            },
            //删除
            deleteMember(id) {
                this.$message.confirm("你确定删除该用户嘛").then(()=>{

                    this.$http.get("/member/delete?id="+id)
                        .then(()=>{
                            this.$message.success("删除成功")
                            this.getDataFromServer();
                        })
                        .catch(()=>{
                            this.$message.error("删除失败")
                        })
                })
            },

            closeWindow() {
                // 重新加载数据
                this.getDataFromServer();
                // 关闭窗口
                this.show = false;
            }
        },
        mounted() {
            this.getDataFromServer();
        },
        computed: {
            pages () {
                if (this.pagination.rowsPerPage == null ||
                    this.pagination.totalItems == null
                ) return 0
                return Math.ceil(this.pagination.totalItems / this.pagination.rowsPerPage)
            }
        },
        watch: {
            pagination: {
                deep: true,
                handler() {
                    this.getDataFromServer();
                }
            },
        },
        components: {
            MemberForm
        }
    }
</script>

<style scoped>
    .tb_label{
        cursor: pointer;
        color: #20a0ff;
    }
    .img{
        height: 100px;
        margin: auto;
        padding-top: 10px;
        padding-left: 40px;
    }
</style>